<template>
    <!-- 更换次数记录界面 -->
    <div class="time-record">
        <h3 class="cll_h3">更改记录</h3>
        <hr />
        <el-form :model="form" label-width="120px" :inline="true" class="formBox">
            <el-form-item size="small">
                <el-select v-model="form.value" placeholder="男士">
                    <el-option label="男士餐" value="男士餐" />
                    <el-option label="女士餐" value="女士餐" />
                    <el-option label="工作餐" value="工作餐" />
                </el-select>
            </el-form-item>
            <el-form-item size="small" :model="form">
                <el-date-picker type="datetime" placeholder="开始时间" v-model="form.start" />
                <span class="middle">至</span>
                <el-date-picker type="datetime" placeholder="结束时间" v-model="form.end" />
            </el-form-item>
            <span class="timeBtn">
                <el-button link size="small" @click="handleFind">筛选</el-button>
            </span>
        </el-form>
        <hr />
        <el-table :data="tableData" style="width: 100%">
            <el-table-column fixed prop="name" label="餐名" width="150" align="center" />
            <el-table-column prop="originalTime" label="原有次数" width="150" align="center" />
            <el-table-column prop="admindNumber" label="修改的次数" width="150" align="center" />
            <el-table-column prop="amendTime" label="修改后的次数" width="150" align="center" />
            <el-table-column prop="surplus" label="余额状态" width="150" align="center" />
            <el-table-column prop="adminCouse" label="修改原因" width="150" align="center" />
            <el-table-column prop="adminMin" label="修改时间" width="150" align="center" />
            <el-table-column prop="admin" label="操作人" width="150" align="center" />
        </el-table>
        <div class="pagination">
            <el-pagination background layout="prev, pager, next" :total="total" hide-on-single-page
                :default-page-size="pagesize" />
        </div>

    </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { getTimeRecord } from '../../api/user'
import dayJS from 'dayjs'
export default defineComponent({
    name: 'timeRecord',
    data() {
        return {
            form: {
                value: '',
                start: '',
                end: '',
                page: 1,
            },
            str: 'YYYY-MM-DD HH:mm:ss',
            tableData: [{
                name: '男士餐',
                originalTime: 20,
                admindNumber: +3,
                amendTime: 23,
                surplus: '无改变',
                adminCouse: '无',
                adminMin: '2017-06-05  12:30',
                admin: '大宝',
            }, {
                name: '男士餐',
                originalTime: 20,
                admindNumber: +3,
                amendTime: 23,
                surplus: '无改变',
                adminCouse: '无',
                adminMin: '2017-06-05  12:30',
                admin: '大宝',
            },],
            total: 5,
            pagesize: 5,

        }
    },
    methods: {
        // 筛选
        async handleFind() {
            // @ts-ignore
            let date1 = dayJS(this.form.start).format(this.str)
            // @ts-ignore
            let date2 = dayJS(this.form.end).format(this.str)
            // @ts-ignore
            date1 = (dayJS(date1).valueOf())
            console.log('date1 = ', (dayJS(date1).valueOf()))
            // @ts-ignore
            date2 = (dayJS(date2).valueOf())
            console.log(' date2 = ', (dayJS(date2).valueOf()))
            this.form.start = date1
            this.form.end = date2
            const data = this.form
            data.page = 1

            // @ts-ignore
            const res = await getTimeRecord(data)
            // @ts-ignore
            this.tableData = res.list
            // @ts-ignore
            this.total = res.total
        },
        reset() {
            this.form.start = ''
            this.form.end = ''
            this.form.value = ''
        },
    },
    async created() {
        const data = this.form
        data.page = 1
        //@ts-ignore
        const result = await getTimeRecord(data)
        //@ts-ignore
        this.tableData = result.list
        //@ts-ignore
        this.total = result.total
    }
})
</script>

<style lang="less" scoped>
.pagination {
    margin: 30px 0 0 400px
}

.middle {
    padding: 0 10px;
}

.formBox {
    margin-top: 15px;
}

.timeBtn {
    display: inline-block;
    width: 60px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background-color: rgb(131, 131, 131);
    margin-left: 20px;
    transform: translateY(-6px);

    .el-button.is-link {
        color: white;
        font-size: 14px;
    }
}
</style>
